<template>
	<view class="u-wrap">
		<view class="u-search-box">
			<u-search shape="square" :show-action="true" action-text="搜索" :clearabled="true" :animation="true"
				v-model="keywords" :disabled="true" @click="goSearch"></u-search>
		</view>
		<view class="container" :style="{'height':cateHeight+'px'}">
			<!-- left左侧一级分类列表 -->
			<scroll-view scroll-y class="left">
				<!-- 循环遍历的 -->
				<view class="left_list" v-for="(item,index) in catelist" :key="item.id" @click="changeCate(index)">
					<text :class="activeIndex==index?'activeList':''">{{item.catename}}</text>
				</view>
			</scroll-view>
			<!-- right右侧二级分类详情 -->
			<scroll-view scroll-y class="right" :scroll-into-view="id">
				<view class="right_box" :id="'id'+index" v-for="(item,index) in catelist" :key="item.id">
					<view class="row_title">{{item.catename}}</view>
					<view class="row">
						<view class="row_list" v-for="(m,i) in item.children" :key="m.id" @click="goList(m.id)">
							<image :src="m.img" mode="widthFix"></image>
							<text>{{m.catename}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	</view>
</template>
<script>
	// 引入分类测试数据
	import cateData from '@/utils/classify.data.js'

	export default {
		data() {
			return {
				id: 'id0', //设置右侧默认置顶分类id
				activeIndex: 0, //默认左侧分类选中下标
				cateHeight: '', //初始化分类容器高度
				catelist: [], //初始化分类数据
				keywords: ''
			}
		},
		onLoad() {
			// 动态获取当前设备的高度
			this.cateHeight = uni.getSystemInfoSync().windowHeight;
			//获取全部商品数据
			this.getCates()
		},

		methods: {
			//跳转到商品的列表页面
			goList(id){
				uni.navigateTo({
					url:"../goodlist/goodlist?type=2&cateid="+id
				})
			},
			//左侧一级菜单切换下标
			changeCate(index){
				//同步选中下标
				this.activeIndex=index
				//同步右侧二级菜单滚动
				this.id="id"+index
			},
			//获取商品的全部分类数据
			getCates() {
				this.$http({
						url: "getcates"
					})
					.then(res => {
						//获取分类数据
						let cateData = res.list;
						//处理二级分类图片
						cateData.forEach(item => {
							//检测是否有二级分类数据
							if (item.children) {
								item.children.forEach(m => m.img = this.$url + m.img)
							}
						})
						//赋值数据
						this.catelist = cateData

					})
					.catch(err => console.log(err))
					
			}
		}

	}
</script>

<style lang="scss" scoped>
	/* 引入样式 */
	@import url("@/static/css/cate.css");
</style>
